<template>
  <view class="agent">
    <u-toast ref="uToast"></u-toast>
    <u-no-network></u-no-network>
    <u-navbar title="代理查询">
      <view class="u-m-r-20" slot="right" @click="showPop()"> 筛选 </view>
    </u-navbar>
    <view class="agent__head">
      <u-search
        placeholder="请输入代理名称或编号"
        v-model="params.searchValue"
        shape="square"
        bg-color="#f6f6f6"
        :show-action="false"
        @search="searchList()"
      ></u-search>
    </view>
    <scroll-view
      class="home__grid-group mt-20"
      scroll-y
      @scrolltolower="onScrolltolower"
    >
      <!--列表数据 -->
      <view>
        <u-card
          :title="item.userName"
          v-for="(item, index) in list"
          :key="index"
          sub-title-color="#9D60FF"
        >
          <!-- 可点击的文字 -->
          <view class="card_list" slot="body">
            <view class="config-text" @click="goConfigFn(item)"> 配置 </view>
            <view class="u-body-item u-flex u-p-b-10">
              <view class="u-body-item-title u-line-2">代理编号：</view>
              <view class="">
                {{ item.agentNo }}
              </view>
            </view>
            <view class="u-body-item u-flex u-p-b-10">
              <view class="u-body-item-title u-line-2">电话：</view>
              <view class="">
                {{ item.mobileNo }}
              </view>
            </view>
            <view class="u-body-item u-flex u-p-b-10">
              <view class="u-body-item-title u-line-2">类型：</view>
              <view class="">
                {{ item.userRole == 'ORG' ? '机构' : '代理商' }}
              </view>
            </view>
          </view>
          <view class="card-footer" slot="foot" @click="goDetail(item)">
            <view class=""> 详情 </view>
            <view><icon type="" :size="23" color="" />></view>
          </view>
        </u-card>
        <u-loadmore :status="status" />
      </view>
    </scroll-view>
    <u-popup v-model="showPopup" mode="top" class="pop_filter">
      <view>
        <view class="pop_filter__title u-margin-left-20"> 筛选类型 </view>
        <view class="flex u-margin-top-20 u-margin-bottom-20">
          <view
            class="pop_filter__btn"
            :class="{ pop_filter__select: checked === index }"
            v-for="(item, index) in bindStates"
            :key="index"
            @click="selectBtn('1', index)"
          >
            {{ item.label }}
          </view>
        </view>

        <view class="flex u-margin-20 u-padding-top-20">
          <u-button
            type="primary"
            class="flex-1 u-m-r-15"
            :custom-style="customCancelStyle"
            hover-class="false"
            @click="cancel()"
            >重置</u-button
          >
          <u-button
            type="primary"
            class="flex-1 u-margin-left-15"
            :custom-style="customSubmitStyle"
            hover-class="false"
            @click="submitFilter()"
            >确定</u-button
          >
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      customCancelStyle: {
        // 注意驼峰命名，并且值必须用引号包括，因为这是对象
        backgroundColor: '#f6f6f6',
        color: 'black',
      },
      customSubmitStyle: {
        // 注意驼峰命名，并且值必须用引号包括，因为这是对象
        backgroundColor: '#9D60FF',
        color: 'white',
      },
      params: {
        authenticationStatus: '',
        merSubName: '',
        searchValue: '',
      },

      pageNo: 1,
      pageSize: '10',
      list: [],
      scrollTop: 0,
      status: 'loadmore',
      thumb: '/static/image/home/icon_examine_store.png',
      bindStates: [
        {
          label: '全部',
          value: '',
        },
        {
          label: '未认证',
          value: '0',
        },
        {
          label: '已认证',
          value: '1',
        },
      ],
      showPopup: false,
      checked: null,
    };
  },
  onReachBottom() {
    this.onScrolltolower();
  },
  mounted() {
    this.agentList();
  },
  methods: {
    showPop() {
      this.showPopup = !this.showPopup;
    },
    selectBtn(type, index) {
      if (type == '1') {
        this.checked = index;
      }
    },
    cancel() {
      const _that = this;
      _that.params.authenticationStatus = '';
      _that.checked = null;
    },
    submitFilter() {
      const _that = this;
      if (_that.checked) {
        _that.params.authenticationStatus =
          _that.bindStates[_that.checked].value;
      }
      _that.pageNo = 1;
      _that.list = [];
      _that.showPopup = false;
      _that.agentList();
    },
    // 跳转详情页面
    goDetail(item) {
      console.log('goDetail----->174', item);
      this.$u.route({
        url: 'pages/main/agent/agentDetail',
        params: {
          agentNo: item.agentNo,
        },
      });
    },
    // 跳转配置页面
    goConfigFn(item) {
      console.log('goConfigFn----->185', item);
      this.$u.route({
        url: 'pages/business/agentConfigure',
        params: {
          agentNo: item.agentNo,
        },
      });
    },
    searchList(e) {
      this.params.merchantNo = e;
      this.pageNo = 1;
      this.list = [];
      this.agentList();
    },
    onPageScroll(e) {
      this.scrollTop = e.scrollTop;
    },
    onScrolltolower() {
      this.status = 'loading';
      this.agentList();
    },
    agentList() {
      const _that = this;
      this.$zx.user_api
        .agentList(this.pageNo, this.pageSize, this.params)
        .then((data) => {
          console.log('agentList----->', data);
          _that.list = _that.list.concat(data);
          // console.log("data=" + JSON.stringify(_that.terminalList))
          if (data.length !== 0) {
            this.status = 'loadmore';
            this.pageNo += 1;
          } else {
            this.status = 'nomore';
          }
        });
    },
  },
};
</script>

<style scoped lang="scss">
.agent {
  &__head {
    padding: 10rpx 20rpx;
    background-color: white;
  }
}

.pop_filter {
  position: absolute;
  top: 80rpx;

  &__title {
    font-weight: bold;
    height: 60rpx;
    line-height: 60rpx;
  }

  &__btn {
    background-color: #f6f6f6;
    width: 180rpx;
    height: 70rpx;
    line-height: 70rpx;
    text-align: center;
    margin: 0 20rpx;
    border-radius: 10rpx;
  }

  &__input {
    background-color: #f6f6f6;
    margin: 0 20rpx;
    border-radius: 10rpx;
  }

  &__select {
    background-color: #f1e8ff;
    color: #9d60ff;
    background-image: url('../../../static/image/home/icon_filter_checked.png');
    background-position: right bottom;
    background-repeat: no-repeat;
  }
}
::v-deep .card_list {
  .config-text {
    color: #9d60ff;
    position: absolute;
    top: 32rpx;
    right: 36rpx;
  }
}
.card-footer {
  display: flex;
  justify-content: space-between;
}
</style>
